<template>
	<view>
		<view class="addressInfo">
				<view class="head">
					<view class="addressHead" >
						<view class="addressIcon">
							<image src="../../static/icons/addressIcon.png" mode="widthFix"></image>
						</view>
						<view class="title">
							收货地址
						</view>
					</view>
					<view class="package">
						快递单号 {{orderInfo.packageId}}
					</view>
				</view>
				<image class="userAvatar" src="../../static/images/gugou/icon1.png" mode="widthFix"></image>
				<view class="address">
					<view class="addressMain">
						湖南省长沙市岳麓区
						{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.area}}
					</view>
					<view class="addressDetail">
						岳麓大道569号湖南工商大学
						{{orderInfo.detailAddress}}
					</view>
				</view>
				<view class="userInfo">
					<view class="name">
						桂圆
						{{orderInfo.userName}}
					</view>
					<view class="tel">
						{{orderInfo.phone}}
					</view>
				</view>
				<image class="editAddress" src="../../static/icons/edit.png" mode="widthFix" @click="chooseAddress"></image>
		</view>
		<view class="groupName" @click="goGroupDetail">
			{{orderInfo.groupName}}
			<image src="../../static/icons/right.png" class="title_after" style="width: 20rpx;height: 20rpx; vertical-align:baseline;"></image>
		</view>
		<view class="details">
			<view class="flex">
				<view class="goodsName" @click="goGoodsDetail">
					{{orderInfo.goodsName}}
					<image src="../../static/icons/right.png" class="title_after" style="width: 20rpx;height: 20rpx; vertical-align:baseline;"></image>
				</view>
				<view class="orderNum">
					{{orderInfo.buyUserNickName}}
				</view>
			</view>
			<view class="priceInfo">
				<view class="table">
			    <view class="table-row header">
			        <view class="table-cell">角色</view>
			        <view class="table-cell ">单价</view>
			        <view class="table-cell">数量</view>
			        <view class="table-cell ">总计</view>
			      </view>
			    <view class="table-row" v-for="(item) in orderInfo.goodsRoleList">
			        <view class="table-cell left">{{item.name}}</view>
			        <view class="table-cell">￥{{item.price}}</view>
			        <view class="table-cell ">×{{item.num}}</view>
			        <view class="table-cell">￥{{item.totalPrice}}</view>
			    </view>
			    </view>
			  </view> 
		</view>
		<view class="orderConfirm">
			<view class="row">
				<view class="font">商品总价</view>
				<view>￥{{orderInfo.totalPrice}}</view>
			</view>
			<view class="row">
				<view class="font">团长收款码
					<image
						src="/static/icons/QRcode.png" 
						@click="openQRcode"
						class="title_after"
						style="width: 25rpx;height:25rpx;vertical-align: baseline;"
					></image>
				</view>
			</view>
			<view class="row">
				<view class="font check">{{isCreateUser?'查看团员付款凭证':'上传付款凭证'}}</view>
				<picker v-if="isCreateUser" :range="options" :value="selectedIndex" class="noPass" :class="isPass?'pass':''" @change="picker">
					{{this.options[this.selectedIndex]}}
				</picker>
				<view style="line-height:70rpx ;" v-else>{{this.options[this.selectedIndex]}}</view>
			</view>
			<view class="row">
				<view v-for="(item) in orderInfo.voucher" v-if="isCreateUser">
					<!-- <image :src="item" style="width:200rpx,
					height:300rpx" ></image> -->
				</view>
				<uni-file-picker limit="5" :image-styles="voucherStyle" 
				:auto-upload="false" @select="upload($event,0)"  v-else></uni-file-picker>
			</view>
			<view class="row font2">
				<view>订单编号</view>
				<view>{{orderInfo.orderNo}}</view>
			</view>
			<view class="row font2">
				<view >订单创建时间</view>
				<view>{{orderInfo.createTime}}</view>
			</view>
			<view class="row font2">
				<view>凭证上传时间</view>
				<view>{{orderInfo.finalPaymentTime}}</view>
			</view>
			<view class="row font2">
				<view>凭证通过时间</view>
				<view>{{orderInfo.voucherTime}}</view>
			</view>
			<view>
				<input v-if="isCreateUser" v-model="orderInfo.packageId" placeholder="请输入快递单号" class="intopackage"/> 
			</view>
		</view>
		
	</view>
</template>

<script>
	import {uploadImg} from '@/api/user.js'
	export default {
		data() {
			return {
				voucherStyle:{
					width:"200rpx",
					height:"300rpx"
				},
				selectedIndex:0,
				options: ['未付款', '已付款'],
				isPass:false,
				isCreateUser:true,
				orderInfo:{
					userName:'',
					userNickName:'桂圆',
					userTel:17507351109,
					addressId:1,
					groupid:1,
					groupName:"乌鸦饲养协会",
					goodsId:1,
					goodsName:"队服娃",            
					roleList:[{
						name:"莫奕",
						averagePrice:20,
						successNum:2,
						totalPrice:60,
					},{
						name:"莫奕",
						averagePrice:20,
						successNum:2,
						totalPrice:60,
					}],
					voucher:[],
					totalPrice:148,
					orderNum:100,
					orderId:"ds0983489489509428048254u3tjjr",
					packageId:"YT214241243432424322",
					createTime:"GMT2023-5-4 01:25:35",
					finalPaymentTime:"GMT2023-5-5 07:27:37",
					voucherTime:"GMT2023-5-6 18:22:37"
				}
			}
		},
		computed: {
		    selectedOption() {
		      return this.options[this.selectedIndex];
		    },
		  },
		methods: {
			picker(e){
				this.selectedIndex = parseInt(e.detail.value)
				this.isPass=this.selectedIndex==0?false:true;
				console.log(this.isPass);
			},
			goGroupDetail(){
				uni.navigateTo({
					url:`/pages/groupDetails/groupDetails?groupId=${this.orderInfo.groupId}`
				})
			},
			chooseAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			gotoGoodsDetail(id){
				uni.navigateTo({
					url:`/pages/goodsDetails/goodsDetails?goodsId=${this.orderInfo.goodsId}`
				})
			},
			upload(e,id) {
				const tempFilePaths = e.tempFilePaths;
				let locationCode=this.imgArr[id].locationCode
				let img=tempFilePaths[0]
				// let imgType=this.imgArr[id].imgType
				uploadImg(locationCode, img).then(res=>{
					let url=JSON.parse(res.data).data
					// if(id==0){
					// 	this.goodsParams.detailImgs.push(url)
					// }else if(id==1){
					// 	this.goodsParams.cover=url
					//}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.addressInfo {
		position: relative;
		height: 250rpx;
		background-color: #E3F1F7;
		font-size: 30rpx;
		overflow: hidden;
		.addressHead {
			position: absolute;
			display: flex;
			align-items: center;
			width: 200rpx;
			height: 80rpx;
			color: #89C3DB;
			left: 30rpx;
			top: 10rpx;
			.addressIcon{
				width: 70rpx;
				height: 70rpx;
				image{
					width: 100%;
				}
			}
		}
	}
	.package{
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		color: #9D9D9E;
		font-size: 22rpx;
	}
	.userAvatar {
		position: absolute;
		left:5%;
		top:40%;
		width:105rpx;
		height: 105rpx;
		border-radius: 50%;
		box-shadow:0 0 10rpx 1rpx #89C3DB;
	}
	.address{
		position: absolute;
		left: 25%;
		top: 40%;
	}
	.userInfo {
		position: absolute;
		color: #9D9D9E;
		font-size: 22rpx;
		bottom: 15%;
		left:25%;
		.name,.tel {
			display: inline-block;
			margin-right:30rpx;
		}
	}
	.editAddress {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		width: 40rpx;
	}
	.groupName {
	  position: relative;
	  padding:40rpx;
	  width: 500rpx;
	  font-size: 30rpx;
	  line-height: 30rpx;
	  color: #333;
	}
	.details {
		// position: relative;
		display: flex;
		flex-direction: column;
		background-color: #E3F1F7;
		width: 85%;
		border-radius: 15px;
		margin: 0 auto;
		padding: 30rpx;
		.flex {
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			margin-bottom:20rpx;
		}
		.priceInfo {
			width: 95%;
			background-color: #fff;
			border-radius: 15px;
			padding: 10rpx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
		.table {
		  width: 90%;
		  margin: 0 auto;
		  border-collapse: collapse;
		}
		.table-row {
		  display: flex;
		}
		
		.table-row:last-child {
		  border-bottom: none;
		}
		
		.table-cell {
		  flex: 1;
		  padding:10rpx 30rpx;
		  text-align:center;
		  color: #858586;
		  font-size: 24rpx;
		}
		.table-cell.left {
		  text-align: left;
		}
		.header .table-cell {
			color: #333;
			font-size: 28rpx;
			padding: 10px;
			border-bottom:1rpx solid #89C3DB;
			text-align: center;
		}
		.table-cell {
		  background-color: #fff;
		}
		
	}
	.orderConfirm {
		margin: 30rpx auto;
		width: 80%;
		padding-bottom: 200rpx;
		.row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.font {
			font-weight: 600;
			color: #89C3DB;
		}
		.font2 {
			font-size: 24rpx;
			color: #6f6f6f;
		}
		.check {
			line-height: 70rpx;
		}
	}
	
	.noPass {
		width: 150rpx;
		height: 70rpx;
		line-height:70rpx ;
		background-color: #f3a73f;
		border: 1px solid #ddd;
		border-radius: 35rpx;
		text-align: center;
		&.pass {
			background-color: #18bc37;
		}
	}
	.intopackage {
		margin-top: 100rpx;
		color: #858586;
		font-size: 30rpx;
		width: 100%;
		height: 40rpx;
		padding: 10rpx;
		border:1rpx solid #89C3DB;
	}
</style>
